<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>


<link rel="stylesheet" type="text/css" 
	href="resources/dojox/grid/resources/Grid.css" />

<link rel="stylesheet" type="text/css"
	href="resources/dojox/grid/resources/<spring:theme code='theme.name'/>Grid.css" />
	
<style type="text/css">
.grid {
	width: 800px;
	height: 500px;
}
</style>



<script type="text/javascript">
	dojo.require("dojox.grid.TreeGrid");	
	dojo.require("dijit.tree.ForestStoreModel");
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require("dojo.parser");
	dojo.require("dojo.date.locale");
	dojo.require("dojo.i18n");

</script>

 <script type="text/javascript"> 

 
 
	function load(){
		
		addEdit = dijit.byId("addDialog");
		addEdit.show();
	}
	
	
		 var store;
		 var treegrid;
 		 dojo.addOnLoad(function() {		
		 // initialize tree grid		    
						
			var url = "http://localhost:8080/workstatus/getProjectsList.json";
				
			
			store = new dojo.data.ItemFileReadStore({
						url : url,
						requestMethod : "get"
						});			

			var treeModel = new dijit.tree.ForestStoreModel({
				store : store, // the data store that this model connects to				 
				rootId : "$root$",
				rootLabel : "ROOT",
				childrenAttrs : [ "subitems" ], // children attributes used in data store. 
				/* 
				  For efficiency reasons, Tree doesn't want to query for the children 
				  of an item until it needs to display them. It doesn't want to query 
				  for children just to see if it should draw an expando (+) icon or not. 
				  So we set "deferItemLoadingUntilExpand" to true. 
				 */
				deferItemLoadingUntilExpand : true
			});
			
			// define the column layout for the tree grid. 
			var layout = [ { name : "Produkt",						field : "displayed",		width : "400px"},
			               { name : "Pierwotna liczba dni",			field : "oryginalDays",		width : "30px"},
			               { name : "Pozostałe dni",				field : "actualDays",		width : "30px"},
			               { name : "Przewidywana data zakończenia",field : "actualEndDate",	width : "70px"},
			               { name : " ",							field : "id",				width : "auto", 	formatter: getButtonStatus },
			               { name : " ",							field : "id",				width : "auto", 	formatter: getButton },
			               
			             ];

			// tree grid 
			treegrid = new dojox.grid.TreeGrid({
				treeModel : treeModel,				
				structure : layout, // define columns layout 
				/* 
				  A 0-based index of the cell in which to place the actual expando (+) 
				  icon. Here we define the "Name" column as the expando column. 
				 */				 
				expandoCell : 0,
				rowSelector : true,
				defaultOpen : false,
				columnReordering : true,
				rowsPerPage : 20,				
				sortChildItems : true,				
				//autoWidth: true,
				autoHeight: true,
				canSort : function(sortInfo) {
					return true;
				},
				onRowClick: function(event) {
				
					var rowIndex = new String(event.rowIndex);
					var rowIndexList = rowIndex.split('/');
					var index = rowIndexList[0];
					
					var productDetails = document.getElementById("productDetails");
			 		productDetails.style.visibility="visible";
			 		productDetails.innerHTML =  "<hr>"+
						 						"<h5>Zadanie: </h5><b>"+store.getValue(treegrid.getItem(index), 'displayed' )+
									 			"</b><h5>Produkt: </h5><b>"+store.getValue(treegrid.getItem(event.rowIndex), 'displayed' ) +
									 			"</b><h5>Wykonanie: </h5><p style='margin-left: 3em;'><table cellspacing=\"10\"><tr><td>"+
									 																store.getValue(treegrid.getItem(event.rowIndex), 'dateFrom' )+
									 																"</td><td>"+
									 																store.getValue(treegrid.getItem(event.rowIndex), 'dateTo' )+
									 																"</td><td>"+
									 																store.getValue(treegrid.getItem(event.rowIndex), 'actualDaysWeek' )+
									 															 "</td></tr><table></p>";
				}
			
			}, dojo.byId("treegrid") );
			dojo.addClass(treegrid.domNode, "grid");
				
			
			
			treegrid.startup();	
	});
	
 	function getButton(id, rowIndex, cell){
 		var rowIndex = new String(cell);
		var row = rowIndex.replace(',', '/');
		var rowIndexList = rowIndex.split(',');
		
		if(rowIndexList.length != 1 ){
			return "<button dojoType=\"dijit.form.Button\" onclick=\"edit('"+row+"')\"><img src=\"img/ico/common/edit_24.png\" alt=\"edit\"></button>";
		}
		return "<button dojoType=\"dijit.form.Button\" onclick=\"add('"+row+"')\"><img src=\"img/ico/common/add_24.png\" alt=\"add\"></button>";
		
 	}	
	function getButtonStatus(id, rowIndex, cell){
 		var rowIndex = new String(cell);
		var row = rowIndex.replace(',', '/');
		var rowIndexList = rowIndex.split(',');
		
		return "<button dojoType=\"dijit.form.Button\" onclick=\"changeStatus('"+row+"')\">Change Status</button>";
	
 	}	
 		
// 	function getButton(value, rowIdx,level) {
						 
// 		switch(getLevel(level) ){
// 			case 1:
// 				return value + "        <a href=\" \" style=\"text-decoration: none\">+</a>";
// 				break;
				
// 			case 2:								
// 				return value + "           <a href=\" \" style=\"text-decoration: none\">+</a>";
// 				break;	
				
// 			 default:
// 				return value;	 
		
// 		}	

// 	}
	
	function addLinks(value, rowIdx,level) {		
		return "<a href=\" \">Edytuj</a>  <a href=\"\">Zasoby</a>";		

	}
	
	function edit(idProduct){

	
		var addProductForm = document.getElementById("addProductForm");
// 		addProductForm.description.value=store.getValue(treegrid.getItem(idProduct), "displayed" );
// 		addProductForm.details.value=store.getValue(treegrid.getItem(idProduct), "details" );
// 		addProductForm.actualStartDate.value=store.getValue(treegrid.getItem(idProduct), "actualStartDate" );
// 		addProductForm.actualEndDate.value=store.getValue(treegrid.getItem(idProduct), "actualEndDate" );
		dijit.byId('description').attr('value',store.getValue(treegrid.getItem(idProduct), "displayed" ));
		dijit.byId('details').attr('value',store.getValue(treegrid.getItem(idProduct), "details" ));

		// String to Date
        var StoD =    dojo.date.locale.parse(store.getValue(treegrid.getItem(idProduct), "actualEndDate" ),{
                        selector: 'date',
                        datePattern:"dd/MM/yyyy"
                    })
		alert(StoD);
		
		
		dijit.byId('actualEndDate').attr('value', StoD);

		addProductForm.idProduct.value=store.getValue(treegrid.getItem(idProduct), "id" );
		addProductForm.idProjectProduct.value = store.getValue(treegrid.getItem(idProduct), "idProjectProduct" );
		addProductForm.idHelper.value = idProduct;		
		alert(addProductForm.actualEndDate.value );
		
		
		
		document.getElementById("addDialog").title="Edytuj Produkt";
		
// 		addProductForm.actualEndDate.style.visibility = 'hidden';
		document.getElementById("endDateRow").style.visibility = 'hidden';
		document.getElementById("oryginalDaysRow").style.visibility = 'hidden';		
		
		addEdit = dijit.byId("addDialog");
		addEdit.show();
		
	}
	function add(idProject){

		var addProductForm = document.getElementById("addProductForm");
		document.getElementById("addDialog").title="Dodaj Produkt";

		dijit.byId('description').attr('value',"");
		dijit.byId('details').attr('value',"");
		dijit.byId('actualEndDate').attr('value', "");
// 		addProductForm.description.value="";
// 		addProductForm.details.value="";
// 		addProductForm.actualStartDate.value="";
// 		addProductForm.actualEndDate.value="";

		addProductForm.idProduct.value="0";
		addProductForm.idProjectProduct.value = store.getValue(treegrid.getItem(idProject), "idProjectProduct" );
		addProductForm.idHelper.value = idProject;
		
// 		alert(addProductForm.idProjectProduct.value );
		

		document.getElementById("endDateRow").style.visibility = 'visible';
		document.getElementById("oryginalDaysRow").style.visibility = 'visible';
		
		addEdit = dijit.byId("addDialog");
		addEdit.show();
	}
	function changeStatus(id){
		
		
		changeStatus = dijit.byId("changeStatus");
		changeStatus.show();
	}

// 	function showDetails(strategicFileCode, tacticalFileCode , tacticalFileDesc, description, originalStartDate, originalEndDate, actualEndDate ){
 		
//  		var productDetails = document.getElementById("productDetails");
//  		productDetails.style.visibility="visible";
//  		productDetails.innerHTML = "<h4>Zadanie: </h4>"+strategicFileCode+"."+tacticalFileCode+ " " +tacticalFileDesc+
//  								   "<h4>Produkt: </h4>"+description+
//  								   "<h4>Wykonanie: </h4><p style='margin-left: 3em;'>"+ originalStartDate +"<br/>"+originalEndDate+"<br/>"+actualEndDate+"<br/></p>";
//  	}
</script>
	

<div id="treegrid" class="grid"></div>

<div dojoType="dijit.Dialog" id="addDialog" title="Produkt" style="width: 500px;" >	
<hr>
	<form:form id="addProductForm" method="post" action="addProductList.html" modelAttribute="product"  >
		<table width="100%" class="addProduct">
			<tr>
				<td align="right">
					<form:hidden path="idProduct" value="-1"/>
					<form:hidden path="idProjectProduct" value="0"/>
					
					<input type="hidden" id="idHelper" value="0"/>
					
					<form:label path="description">
						<spring:message code="Product.description"/>:
					</form:label>
				</td>
				<td>
					<form:input path="description" cssErrorClass="form-error-field"/>
				</td>
				<td><form:errors path="description" cssClass="form-error-message" /></td>
			</tr>
			<tr>
				<td align="right">
					<form:label path="details">
						<spring:message code="Product.details"/>:
					</form:label>
				</td>
				<td>
					<form:input path="details" cssErrorClass="form-error-field"/>
				</td>
				<td><form:errors path="details" cssClass="form-error-message" /></td>
			</tr>
<!-- 			<tr> -->
<!-- 				<td align="right"> -->
<%-- 					<form:label path="actualStartDate"> --%>
<%-- 						<spring:message code="Product.latestStartDate"/>: --%>
<%-- 					</form:label> --%>
<!-- 				</td> -->
<!-- 				<td> -->
<%-- 					<form:input path="actualStartDate" cssErrorClass="form-error-field"/> --%>
<!-- 				</td> -->
<%-- 				<td><form:errors path="actualStartDate" cssClass="form-error-message" /></td> --%>
<!-- 			</tr> -->
			
			<tr id="oryginalDaysRow">
				<td align="right">
					<form:label path="oryginalDays">
						<spring:message code="Product.oryginalDays"/>: 
					</form:label>
				</td>
				<td>
					<form:input path="oryginalDays" cssErrorClass="form-error-field"/>
				</td>
				<td><form:errors path="oryginalDays" cssClass="form-error-message" /></td>
			</tr>
			<tr id="endDateRow">
				<td align="right">
					<form:label path="actualEndDate">
						<spring:message code="Product.endDate"/>: 
					</form:label>
				</td>
				<td>
					<form:input path="actualEndDate" cssErrorClass="form-error-field"/>
				</td>
				<td><form:errors path="actualEndDate" cssClass="form-error-message" /></td>
			</tr>
			<tr>
				<td align="right">
					
					<button><spring:message code="Product.cancel"/></button>  
				</td>
				<td align="left">
					<button type="submit" id="save"><spring:message code="Product.save"/></button>
				</td>
				<td>
				</td>	
			</tr>
		</table>
	</form:form>
<hr>
</div>
<button id="testowy" onclick="testowy()">TEST</button>
<div dojoType="dijit.Dialog" id="changeStatus" title="Zmiana statusu produktu" style="width: 500px;">	

<hr>
	<form:form id="changeStatusForm" modelAttribute="statusFormList" action="changeStatus.html" method="post">
		<table>
			<c:forEach items="${statusFormList}" var="item" varStatus="loop">
				<tr>
					<td>
<%-- 						<form:radiobuttons items="${item}" path="statusFormList[${loop.index}].id" /> --%>
					</td>
					<td>
<%-- 						<form:label path="actualEndDate"> --%>
						qqqqq
<%-- 						</form:label> --%>
					</td>
				</tr>
			</c:forEach>
		</table>
		<input type="submit" value="submit" />
	</form:form>



	
<hr>
</div>


<div id="productDetails" title="Szczegóły produktu" style=" visibility: hidden;" align="justify" >
</div>


<script type="text/javascript">

Spring.addDecoration(new Spring.ElementDecoration({
	elementId : 'description',
	widgetType : 'dijit.form.ValidationTextBox',
	widgetAttrs : {
		promptMessage : '<spring:message code="Product.description.tooltip"/>',
		required : true,
		style: 'width: 100%;'
	}
}));
Spring.addDecoration(new Spring.ElementDecoration({
	elementId : 'details',
	widgetType : 'dijit.form.ValidationTextBox',
	widgetAttrs : {
		promptMessage : '<spring:message code="Product.details.tooltip"/>',
		required : true,
		style: 'width: 100%;'
	}
}));

Spring.addDecoration(new Spring.ElementDecoration({
	elementId : 'oryginalDays',
	widgetType : 'dijit.form.ValidationTextBox',
	widgetAttrs : {
		promptMessage : '<spring:message code="Product.oryginalDays.tooltip"/>',
		required : true,
		style: 'width: 100%;'
	}
}));

// if(document.getElementById("addProductForm").actualEndDate.style.visibility != 'hidden'){
	
	
Spring.addDecoration(new Spring.ElementDecoration({
	elementId : 'actualEndDate',
	widgetType : 'dijit.form.DateTextBox',
	widgetAttrs : {
		promptMessage : '<spring:message code="Product.endDate.tooltip"/>',
		datePattern : 'dd/MM/yyyy',
		required : true,
		style: 'width: 100%;'
	}
}));

</script>
